<template>
    <div class="user-list">
        <h3>评论列表</h3>
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column prop="index" label="序号" width="100" />
            <el-table-column label="评论内容" prop="comment_content" />
            <el-table-column label="用户" prop="username" />
            <el-table-column label="关联内容" prop="song_name">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                        <template #default>
                            <div>歌曲: {{ scope.row.song_name }}</div>
                            <div>分享描述: {{ scope.row.post_content }}</div>
                        </template>
                        <template #reference>
                            <el-tag size="large" type="warning">{{ scope.row.song_name }}</el-tag>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="page">
            <el-pagination :page-size="pageSize" :pager-count="pageSize" layout="prev, pager, next" :total="totalNum"
                @change="changePageFn" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import api from '@/api/http'
import { ElMessage, ElMessageBox } from 'element-plus'

// 定义接口，形容对象的结构
// interface User {
//     date: string
//     user_name: string
//     user_email: string
//     user_phone: string
//     user_sex: number
//     id?: number | string
// }


// 社区评论列表数据
const tableData = ref<any>([])

// 社区评论总数
let totalNum = ref(0)
let page = ref(1)
let pageSize = ref(11)

// 定义函数获取社区评论列表
const commentListFn = async (page = 1, pageSize = 10) => {
    await api.getCommunityComment({ page, pageSize }).then(
        content => {
            let { code, total, result } = content;
            if (code == 200) {
                let newArr = result.map((item: any, i: number) => {
                    item.index = i + 1;
                    return item
                })
                tableData.value = newArr;
                totalNum.value = total;
            }
            else {
                console.log("获取评论列表失败");

            }
        }
    )
}

// 点击删除社区评论
const handleDelete = (index: number, row: any) => {

    // 获取当前点击的选项
    let { comment_id } = row;
    console.log("11:", row);

    ElMessageBox.confirm(
        `是否删除这个评论?`,
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            // 删除用户
            await api.removeCommunityComment({ comment_id })
                .then(
                    content => {
                        let { code, msg } = content;
                        if (code != 200) {
                            ElMessage.error(msg)
                        }
                    }
                )
            // 删除程序中数组对应的数据
            tableData.value.splice(index, 1);
        })
        .catch(() => {
            console.log("点击取消")
        })
}

// 点击分页时执行的函数
const changePageFn = (num: number) => {
    // console.log(value)
    page.value = num;
    commentListFn(page.value, pageSize.value);
}

// 初始化社区评论列表
commentListFn(page.value, pageSize.value);

</script>

<style lang="scss">
.user-list {
    h3 {
        margin-bottom: 15px;
    }

}

.page {
    margin-top: 15px;
    background-color: #fff;
    padding: 10px 10px;
}
</style>